<template>
  <van-tabs>
    <van-tab title="推荐">
      <div class="home-radar">
        <div class="group_header">
          <h2>这些歌单，你一定在找！</h2>
        </div>
        <div class="wrapper" ref="wrapper">
          <ul class="content" ref="content">
            <li v-for="(item, index) in wrapperlist" :key="index">
              <span>{{ item.playCount | numFilter(1) }}万</span>
              <img :src="item.coverImgUrl" radius="10rem" />
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
      </div>
    </van-tab>
    <van-tab title="官方">内容 2</van-tab>
  </van-tabs>
</template>
<script>
export default {
  data() {
    return {
      wrapperlist: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$request("get", "/top/playlist/highquality?limit=12").then((res) => {
        console.log(res);
        this.wrapperlist = res.playlists;
       
      });
    },
  },
  filters: {
    numFilter(value, num) {
      return parseFloat(value / 10000).toFixed(num);
    },
  },
};
</script>
<style scoped>
.wrapper {
  width: 100%;
  overflow: hidden;
}
/* ul.content {
  width: calc(6 * 7rem) !important;
} */
ul.content li {
  display: inline-block;
  position: relative;
  width: 7rem;
  vertical-align: top;
}
ul.content li img {
  width: 100%;
  border-radius: 10px;
}
ul.content li span {
  font-size: 0.8rem;
  color: #54493b;
}
ul.content li span:first-child {
  position: absolute;
  z-index: 99;
  right: 0;
  background-color: rgb(222, 230, 225);
  border-radius: 3px;
}
ul.content li {
  margin: 0.5rem;
}
.group_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>